import React, { useEffect, useRef } from 'react';  
import * as echarts from 'echarts';  

const LineChart = () => {  
    const chartRef = useRef(null);  

    useEffect(() => {  
        const myChart = echarts.init(chartRef.current);  

        const data = [  
            { value: 10, month: '一月' },  
            { value: 12, month: '二月' },  
            { value: 8, month: '三月' },  
            { value: 15, month: '四月' },  
            { value: 13, month: '五月' }  
        ];  

        const option = {  
            xAxis: {  
                type: 'category',  
                data: data.map(item => item.month)  
            },  
            yAxis: {  
                type: 'value'  
            },  
            series: [  
                {  
                    data: data.map(item => item.value),  
                    type: 'line',  
                    lineStyle: {  
                        color: '#00FF00'  
                    },  
                    areaStyle: {  
                        color: 'rgba(0, 255, 0, 0.2)'  
                    }  
                }  
            ]  
        };  

        myChart.setOption(option);  

        return () => {  
            myChart.dispose();  
        };  
    }, []);  

    return (  
        <div ref={chartRef} style={{ width: '100%', height: '300px' }}></div>  
    );  
};  

export default LineChart;